<template>
	<view class="zy-column-full">
		<zy-title title="Team"></zy-title>
		
		<scroll-view class="zy-scroll zy-page-padding" scroll-y>
			<!-- item1 -->
			<view>
				<view class="zy-row">
					<view class="zy-row-center zy-flex zy-text-white bg-yellow">Tiam Size</view>
					<view class="zy-row-center zy-flex zy-text-white bg-red">Total commission income</view>
				</view>
				<view class="zy-row zy-pv-lg" style="background-color: #fff;">
					<view class="zy-row-center zy-flex zy-text-black-lg-bold">156</view>
					<view class="zy-row-center zy-flex zy-text-black-lg-bold">1,503.20</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-p-lg bg-yellow-light">
					<view class="zy-text-black zy-font-bold">Promation tomissions</view>
					<view class="zy-row zy-mt-lg">
						<image src="../../static/img/team-money.png" style="width: 52rpx;" mode="widthFix"></image>
						<zy-price class="zy-flex-width zy-ml" color="red" size="lg" price="4,987.51"></zy-price>
						<zy-button content="Track Order" size="sm" @click="openPopup"></zy-button>
					</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-p-lg bg-yellow-light">
					<view class="zy-text-black zy-font-bold">Promation tomissions</view>
					<view class="zy-row zy-mt-lg">
						<image src="../../static/img/team-money2.png" style="width: 52rpx;" mode="widthFix"></image>
						<zy-price class="zy-flex-width zy-ml" color="red" size="lg" price="4,987.51"></zy-price>
						<zy-button content="Track Order" size="sm" @click="toTeamInvitaion()"></zy-button>
					</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-row-center zy-pv-lg zy-bg-white-rb30">
					<image src="../../static/img/team-add.png" style="width:52rpx ;" mode="widthFix"></image>
					<view class="zy-text-main zy-font-bold zy-ml-sm" style="color: #D55B0B;">Incite more friends</view>
				</view>
			</view>
			
			<!-- item2 -->
			<view class="zy-bg-white-r30 zy-p-lg zy-mt-lg">
				<view class="zy-text-black zy-font-bold">Promation tomissions cae retine</view>
				<view class="zy-row zy-mt">
					<view class="zy-row zy-flex-width">
						<scroll-view class="zy-scroll-x" scroll-x>
							<image class="zy-mr-sm" :src="getTestImage()" style="width: 90rpx; height: 90rpx; border-radius: 15rpx;"></image>
							<image class="zy-mr-sm" :src="getTestImage()" style="width: 90rpx; height: 90rpx; border-radius: 15rpx;"></image>
							<image class="zy-mr-sm" :src="getTestImage()" style="width: 90rpx; height: 90rpx; border-radius: 15rpx;"></image>
							<image class="zy-mr-sm" :src="getTestImage()" style="width: 90rpx; height: 90rpx; border-radius: 15rpx;"></image>
							<image class="zy-mr-sm" :src="getTestImage()" style="width: 90rpx; height: 90rpx; border-radius: 15rpx;"></image>
							<image class="zy-mr-sm" :src="getTestImage()" style="width: 90rpx; height: 90rpx; border-radius: 15rpx;"></image>
						</scroll-view>
					</view>
					<image class="zy-ml-lg" src="../../static/img/team-right-arrow.png" style="width: 68rpx; height: 68rpx;" mode="widthFix"></image>
				</view>
			</view>
			
			<!-- item3 -->
			<view class="zy-column-center-v zy-bg-white-r30 zy-mt-lg" style="padding: 0 30rpx 30rpx">
				<view class="zy-row-center zy-bg-orange-gradient-rb30 zy-pv-sm" style="width: 80%;">
					<image src="@/static/img/bell_white.png" style="width: 30rpx;" mode="widthFix"></image>
					<view class="zy-text-white zy-ml-sm">Sales commission</view>
				</view>
				<view class="zy-bg-yellow-light-r15 zy-mt zy-p" style="width: 100%;">
					<view class="zy-row">
						<view class="zy-row-center zy-flex">1st tier</view>
						<view class="zy-row-center zy-flex">2st tier</view>
						<view class="zy-row-center zy-flex">3st tier</view>
					</view>
					<view class="zy-row zy-mt">
						<view class="zy-row-center zy-flex zy-text-main-lg-bold">14%</view>
						<view class="zy-row-center zy-flex zy-text-main-lg-bold">14%</view>
						<view class="zy-row-center zy-flex zy-text-main-lg-bold">14%</view>
					</view>
				</view>
				<view class="zy-row-top zy-mt" style="width: 100%;">
					<image src="@/static/img/team-lv2.png" style="width: 120rpx;" mode="widthFix"></image>
					<view class="zy-flex-width zy-ml" style="text-align: end;">
						<view class="zy-text-gray-sm-super zy-text-line2">Invite 4 bew user to register and activeate any zone VIP can be upgraded to LV1</view>
						<view class="zy-text-main-lg-bold zy-mt-sm">Ist tier7%2nd tier 5%</view>
					</view>
				</view>
			</view>
			
			<!-- item4 -->
			<view class="zy-mv-lg zy-bg-white-rb30">
				<view class="zy-row-between zy-bg-orange-gradient-rt30 zy-ph-lg zy-pv">
					<view class="zy-row">
						<view class="zy-text-white zy-mr">Ist tier</view>
						<image src="@/static/img/team-lst.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view class="zy-text-white">56 Peogle</view>
				</view>
				<view class="zy-p">
					<view class="zy-row zy-bg-main-light-r15 zy-p-sm zy-font-bold">
						<view class="zy-row-center zy-flex-width"></view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm" style="text-align: center;">new member</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm" style="text-align: center;">Incmased vip</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm" style="text-align: center;">VIP sales</view>
					</view>
					<view class="zy-row zy-p-sm zy-mt zy-font-bold">
						<view class="zy-row-center zy-flex-width zy-text-black-sm">Today</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm">0</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm">
							<view class="zy-mr-sm">0</view>
							<image src="@/static/img/team-down.png" style="width: 16rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm">0</view>
					</view>
					<zy-line></zy-line>
					<view class="zy-row zy-p-sm zy-mt zy-font-bold">
						<view class="zy-row-center zy-flex-width zy-text-black-sm">Yesterday</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm">
							<view class="zy-mr-sm">0</view>
							<image src="@/static/img/team-down.png" style="width: 16rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm">
							<view class="zy-mr-sm">1</view>
							<!-- <image src="@/static/img/team-down.png" style="width: 16rpx;" mode="widthFix"></image> -->
						</view>
						<view class="zy-row-center zy-flex-width zy-text-black-sm">
							<zy-price color="black" size="sm" price="1600"></zy-price>
						</view>
					</view>
					<zy-line></zy-line>
				</view>
			</view>
		</scroll-view>
		
		<!-- popup -->
		<popup-team ref="popup"></popup-team>
	</view>
</template>

<script>
import RouteUtil from '../../common/RouteUtil'
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			openPopup(){
				this.$refs.popup.open()
			},
			toTeamInvitaion(){
				RouteUtil.toTeamInviation()
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg-yellow{
	height: 72rpx;
	background: #FCB61A;
	border-top-left-radius: 30rpx;
	text-align: center;
}
.bg-red{
	height: 72rpx;
	background: $zy-color-main;
	border-top-right-radius: 30rpx;
	text-align: center;
}
.bg-yellow-light{
	background-color: $zy-color-yellow-light;
}
</style>
